<template>
	<view>
		<view class="me-box">
			<view class="me-message">
				<image class="tx" src="../../static/man.png" mode=""></image>
				<view class="message">
					<u-row gutter="16">
						<u-col span="3">
							<view class="label" style="width: 90%; float: left;">
								姓名
							</view>
							<view class="label" style="width: 10%; float: left;">
								:
							</view>
						</u-col>
						<u-col span="9">
							{{info.name}}<image src="../../static/edit.png" style="width: 28rpx; margin-left: 20rpx;" mode="widthFix" @click="editMsg()"></image>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="3">
							<view class="label" style="width: 90%; float: left;">
								所属单位
							</view>
							<view class="label" style="width: 10%; float: left;">
								:
							</view>
						</u-col>
						<u-col span="9">
							{{info.company.name ? info.company.name : ''}}
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="3">
							<view class="label" style="width: 90%; float: left;">
								岗位
							</view>
							<view class="label" style="width: 10%; float: left;">
								:
							</view>
						</u-col>
						<u-col span="9">
							{{info.profession.name}}
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="3">
							<view class="label" style="width: 90%; float: left;">
								员工编号
							</view>
							<view class="label" style="width: 10%; float: left;">
								:
							</view>
						</u-col>
						<u-col span="9">
							{{info.employeeNumber ? info.employeeNumber : ''}}
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="tab-box">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" inactive-color="#999999" active-color="#F18B3A"></u-tabs>
				<view class="tab-message">
					<u-circle-progress active-color="#F18B3A" :percent="percent" width="300" border-width="18">
						<view class="u-progress-content">
							<view class='u-progress-info'>{{percent > 0 ? percent +'%' : 0}}</view>
							<view class='u-progress-info' style="font-size: 30rpx;">已学习</view>
						</view>
					</u-circle-progress>
					<view style="height: 50rpx;"></view>
					<u-row gutter="16">
						<u-col span="6">
							<view style="text-align: center; font-size: 32rpx;">
								<text class="quan"></text>已学习：{{current == 0 ? usersCourse.compulsory.learned : usersCourse.optional.learned}}
							</view>
						</u-col>
						<u-col span="6">
							<view style="text-align: center; font-size: 32rpx;">
								<text class="quan" style="opacity: 0.2;"></text>未学习：{{current == 0 ? (usersCourse.compulsory.total - usersCourse.compulsory.learned) : (usersCourse.optional.total - usersCourse.optional.learned)}}
							</view>
						</u-col>
					</u-row>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import {userInfo,userInfoCourses,usersCourseStatistics,userPwd} from '../../api/api.js'
	export default {
		data() {
			return {
				list: [{
					name: '必学课程'
				}, {
					name: '选学课程'
				}],
				current: 0,
				info:{},
				courseName:'',
				usersCourse:{},
				percent: 0,
				percentBai: 0,
			}
		},
		onShow() {
			this.current = 0
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				let id = uni.getStorageSync('userObj').id
				userInfo({id:id}).then(resp=>{
					this.info = resp
					this.getUserInfoCourses()
				})
			},
			// 查询用户必学课程
			getUserInfoCourses(){
				let id = uni.getStorageSync('userObj').id
				userInfoCourses({id:id}).then(resp=>{
					let arr = []
					resp.forEach(e=>{
						arr.push(e.name)
					})
					this.courseName = arr.join(',')
					this.getUsersCourseStatistics()
				})
			},
			// 统计会员学习情况
			getUsersCourseStatistics(){
				let id = uni.getStorageSync('userObj').id
				usersCourseStatistics({id:id}).then(resp=>{
					this.usersCourse = resp
					this.percent = (resp.compulsory.learned/resp.compulsory.total*100).toFixed(0)
				})
			},
			change(index) {
				this.current = index;
				if(index == 0){
					this.percent = (this.usersCourse.compulsory.learned/this.usersCourse.compulsory.total*100).toFixed(0)
				}else{
					this.percent = (this.usersCourse.optional.learned/this.usersCourse.optional.total*100).toFixed(0)
				}
				
			},
			editMsg(){
				uni.navigateTo({
					url:`../info/info?id=${this.info.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.u-progress-content {
	.u-progress-info {
		font-size: 60rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
		color: #F18B3A;
	}
}
.me-box{
	padding: 20px;
	.me-message{
		padding: 20rpx 40rpx;
		background: linear-gradient(90deg, #FF9D50 0%, #E66C01 100%);
		border-radius: 10px;
		.tx{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			padding: 2rpx;
			border: solid 4rpx #D8D8D8;
		}
		.message{
			margin-top: 20rpx;
			color: #fff;
			font-size: 28rpx;
			.label{
				text-align: justify; 
				width: 100%;
				opacity: 0.6;
				height: 50rpx;
				&::after {
					display: inline-block;
					width: 100%;
					content: '';
					height: 0;
				}
			}
		}
	}
	.tab-box{
		margin-top: 50rpx;
		.tab-message{
			margin-top: 50rpx;
			width: 100%;
			text-align: center;
			z-index: -1;
			.quan{
				margin-right: 10rpx;
				width: 28rpx;
				height: 28rpx;
				display: inline-block;
				border: solid 4rpx #F18B3A;
				border-radius: 50%;
				vertical-align: middle;
			}
		}
	}
}
</style>
